import React, {Component} from 'react';
import './index.less'

import {
    Row,
    Col,
    Table,
    Form,
    Cascader,
    Icon,
    Button,
    Input,
    Select,
    DatePicker,
    Radio,
    TreeSelect,
    message,
    Upload,
    Modal,
    Checkbox,
    Spin,
    Alert
} from 'antd'
import Fetch from "../../../../../../fetchAPI";

const {Option} = Select;

class subTable extends Component {
    constructor(props) {
        super(props)
        Fetch.getStoreList({WarehouseNo:"",AreaWarehouseNo:"",Query_WarehouseType:"1",Query_WarehouseFlag:"1"}).then(res => {
            this.setState({
                StoreList: res
            })
        })
    }

    state = {
        tableList: [],
        visible: false,
        currentItem: {},
        StoreList: []
    }
    clearWarehouse = (item, skuItem) => {
        return () => {
            const {
                warehouseNo,
                warehouseName,
            } = item;
            const {productNo}=this.props.data;
            const {id} = this.props.location.query;

            const {skuNo} = skuItem;
            this.setState({})
            if (item) {
                console.log(item)
                Modal.confirm({
                    title: (
                        <div>您确定要删除编号为 <span style={{color: 'red'}}>{warehouseNo}</span> 的<span
                            style={{color: 'red'}}>{warehouseName || '仓库'}</span>吗？
                        </div>),
                    onOk:()=> {
                        Fetch.clearQuantity({
                            "presaleId": id,
                            "skuNo": skuNo,
                            "productNo": productNo,
                            "warehouseNo": warehouseNo,
                            "Id":item.id
                        }).then(res => {
                            if (res.code === '200') {
                                this.props.onDataReset(1)
                                message.success('清除库存成功');
                            }
                        })
                    },
                })
            }
        }
    }
    setStore = (item) => {
        return () => {
            this.setState({
                visible: true,
                currentItem: item
            })
        }

    }
    setStoreConfirm = () => {
        const {pid, id} = this.props.location.query;
        const {productNo}=this.props.data;
        const {skuNo} = this.state.currentItem;
        this.props.form.validateFields((err, value) => {
            const {currentStore, addNumber} = value;
            if (!err) {
                this.setState({
                    visible: false
                })
                if (pid && id) {
                    Fetch.setQuantity({
                        "presaleId": id,
                        "skuNo": skuNo,
                        "productNo": productNo,
                        "warehouseNo": currentStore,
                        "quantity": addNumber
                    }).then((res) => {
                        if (res.code === '200') {
                            this.props.onDataReset(1)
                            message.success('添加库存成功！')
                        }

                    })
                }
            }
        })


    }
    setStoreCancle = () => {
        this.props.form.resetFields();
        this.setState({
            visible: false
        })
    }

    render() {
        const {subTableData} = this.props.data;
        const {visible, currentItem, StoreList} = this.state;
        const {getFieldDecorator} = this.props.form;
        const {id} = this.props.location.query;
        const itemLayout = {
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 18
            }
        }
        const columns = [
            {title: 'Date', width: 60, key: '1'},
            {
                title: 'Date', key: 'date', render: (item) => {
                    const {
                        skuNo,
                        color
                    } = item;
                    return (
                        <div className={'subTable_item1_wrap'}>
                            <div className={'item_info_text'}>
                                <p><span>SKU：</span><b>{skuNo}</b></p>
                                <p><span>颜色：</span><b>{color}</b></p>
                            </div>
                        </div>

                    )
                }
            },
            {
                width: 350, title: 'Status', key: 'state', render: (text, SKUitem) => {
                    const {
                        warehouse,
                        tempPresaleSumQuantity,
                        sumQuantity,
                        presaleSumQuantity
                    } = SKUitem;
                    return (
                        <div className={'subTable_item2_wrap'}>
                            <div className={'item_info_text'}>
                                <p>
                                    <span style={{marginTop:1}}>总库存：</span>
                                    <b>{sumQuantity}</b>
                                </p>
                                <p>
                                    <span style={{marginTop:1}}>预售库存：</span>
                                    <b>{presaleSumQuantity}</b>
                                </p>
                                <p>
                                    <span style={{marginTop:1}}>预售设置库存：</span>
                                    <b>{tempPresaleSumQuantity}</b>
                                </p>
                                {warehouse && warehouse.map((item, i) => {
                                    const {warehouseName, quantity} = item;
                                    return <p key={i}><span>{warehouseName}：</span>
                                        <b>
                                            {quantity}
                                            <Button
                                                style={{marginBottom: 10,marginLeft:10}}
                                                type={'primary'}
                                                size={'small'}
                                                onClick={this.clearWarehouse(item, SKUitem)}>
                                                清空经销预售库存
                                            </Button>
                                        </b>

                                    </p>
                                })}
                            </div>
                        </div>

                    )
                }
            },
            {
                width: 300, title: 'Upgrade Status', key: 'upgradeNum', render: (item) => {
                    const {
                        createUserName,
                        createDate,
                        updateUserName,
                        updateDate
                    } = item;
                    return (
                        <div className={'subTable_item3_wrap'}>
                            <div className={'item_info_text'}>
                                <p><span>创建人：</span><b>{createUserName}</b></p>
                                <p><span>创建时间：</span><b>{createDate}</b></p>
                                <p><span>修改人：</span><b>{updateUserName}</b></p>
                                <p><span>修改时间：</span><b>{updateDate}</b></p>
                            </div>
                        </div>

                    )
                }
            },
            {
                title: 'Action',
                width: 200,
                dataIndex: 'operation',
                key: 'operation',
                render: (text, item) => {
                    return (
                        <div className={'item4_wrap'}>
                            <div className={'item_info_text'}>
                                <Button onClick={this.setStore(item)} type={'primary'}>设置经销预售库存</Button>

                            </div>
                        </div>

                    )
                },
            },
        ];
        return (
            <div>
                <Modal
                    title={'设置商品预售库存'}
                    onOk={this.setStoreConfirm}
                    onCancel={this.setStoreCancle}
                    visible={visible}>
                    <div>
                        <Form>
                            <Form.Item
                                label={'SKU编号：'}
                                {...itemLayout}
                                style={{marginBottom: 0}}
                            >
                                {currentItem.skuNo}
                            </Form.Item>
                            <Form.Item
                                label={'预售编号：'}
                                {...itemLayout}
                                style={{marginBottom: 0}}
                            >
                                {id}
                            </Form.Item>
                            <Form.Item
                                label={'选择仓库：'}
                                {...itemLayout}
                            >
                                {getFieldDecorator('currentStore', {
                                    rules: [{required: true, message: '请选择仓库!'}],
                                })(
                                    <Select
                                        style={{width: '100%'}}
                                        placeholder={'请选择仓库'}
                                        optionFilterProp={'children'}
                                    >
                                        {StoreList && StoreList.map((item) => {
                                            return <Option
                                                value={item.WarehouseNo}
                                                key={item.WarehouseNo}>{item.WarehouseName || '暂无'}</Option>
                                        })}
                                    </Select>
                                )}
                            </Form.Item>
                            <Form.Item
                                label={'本次新增数量：'}
                                {...itemLayout}
                            >
                                {getFieldDecorator('addNumber', {
                                    rules: [
                                        {required: true, message: '请填写本次新增数量!'},
                                        {pattern: /^\d+[^\.]?$/, message: '请填写整数!'}
                                    ],
                                })(
                                    <Input placeholder="请输入本次新增数量"/>
                                )}
                            </Form.Item>
                        </Form>
                    </div>
                </Modal>
                {!subTableData?<div className={'loadingWrap'}><Spin tip="Loading..."></Spin></div>
                   :  <Table
                    bordered={false}
                    rowClassName={'sku_row'}
                    showHeader={false}
                    columns={columns}
                    dataSource={subTableData}
                    pagination={false}
                    />
                }

            </div>

        );
    }
}

export default Form.create()(subTable);

